<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        /* 让标题和图片向右侧浮动。 */
        div {
            float: right;
            width: 120px;
            margin: 0 0 15px 20px;
            padding: 15px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        <img src="images/logocss.gif" width="95" height="84" /><br>
        CSS is fun!
    </div>
    <p>
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>

    <p>
        在上面的段落中,div元素是120像素宽,它包含了图像。
        div元素会向右浮动。
        Margins 被添加到div使得文本远离div。
        Borders和padding被添加到div框架的图片和标题中
    </p>
</body>

</html>